import React from 'react'
import { Tabs, Form, Input, Button ,Dialog} from 'antd-mobile'
import img from '../../image/登录.png'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
function Login() {
    const navigate = useNavigate()

    const onFinish = async (values) => {

        console.log(values);
        const res = await axios.post('/api/login', values)
        console.log(res);

        if (res.data.code == 200) {
            localStorage.setItem('token', res.data.data.token)
            navigate('/')
        }



    }
    return (
        <div>
            <h2 style={{ textAlign: 'center' }}>登录可享更多权益</h2>

            <Tabs>
                <Tabs.Tab title='APP登录' key='fruits'>
                    <div>
                        <img onClick={() => {
                            localStorage.setItem('token', "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MzMzLCJ1c2VybmFtZSI6ImFkbWluIiwicGFzc3dvcmQiOiIxMjM0NTYiLCJ0ZWwiOm51bGwsInRlbENvZGUiOm51bGwsIm5pY2tuYW1lIjoi6ams56eA6IuxIiwiYXZhdGFyIjoiaHR0cHM6Ly9yb2JvaGFzaC5vcmcvMzcwMDAwMjAyMTA2Mjc5OTQzP3NldD1zZXQxIiwiY3JlYXRlVGltZSI6IjIwMjUtMDYtMTdUMDE6MTU6MTAuMDAwWiIsInNleCI6IueUtyIsImFnZSI6MTgsImlhdCI6MTc1ODUwMjEzNn0.JRsFM1RNkQB0_aYfXe1gRZMxkh0tjpqsOwvjeHCSqqc")
                            navigate('/')
                        }} style={{ width: '45vw', height: '45vw', textAlign: 'center' }} src={img} alt="" />

                    </div>
                </Tabs.Tab>
                <Tabs.Tab title='免密登录' key='vegetables'>
                    西红柿
                </Tabs.Tab>
                <Tabs.Tab title='密码登录' key='animals'>
                    <Form layout='horizontal' onFinish={onFinish} >
                        <Form.Item
                            name='username'
                            label='姓名'
                            rules={[{ required: true, message: '姓名不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='请输入姓名' />
                        </Form.Item>
                        <Form.Item
                            name='password'
                            label='密码'
                            rules={[{ required: true, message: '姓名不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='请输入姓名' />
                        </Form.Item>
                        <Button onClick={() =>
                            Dialog.alert({
                content: '人在天边月上明',
                onConfirm: () => {
                  console.log('Confirmed')
                },
              })
                        } block type='submit' color='primary' size='large'>
                            提交
                        </Button>
                    </Form>

                </Tabs.Tab>
            </Tabs>
        </div>
    )
}

export default Login